<template>
  <div
    style="display: flex; flex-direction: column"
    :style="{
      height: codeHeight + 'px',
      width: codeWidth + 'px',
    }"
  >
    <div style="width: 100%; height: 30px; background: black; color: white">
      代码块
    </div>
    <div
      style="
        width: 100%;
        height: 30px;
        background: black;
        color: white;
        display: flex;
        align-items: center;
        flex-shrink:0;
      "
    >
      延时：
      <div
        type="text"
        disabled
        style="width: 100px; height: 20px;background:grey;overflow:hidden;"
        
      >{{delay}}</div>
    </div>
    <div
      style="
        flex: 1;

        background: white;
        text-align: left;
        padding: 5px;
      "
      :style="{
        height: codeHeight - 40 + 'px',
        width: codeWidth - 10 + 'px',
      }"
      v-html="code"
    ></div>
  </div>
</template>

<script>
import "prismjs/themes/prism.css";
export default {
  name: "CodeComponent",
  inject: ["getNode"],
  data() {
    return {
      code: null,
      codeHeight: 100,
      codeWidth: 400,
      eventType: 9,
      instructionData: null,
      delay: 0,
    };
  },
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      
      if (current === undefined) {
        self.code = null;
        self.codeHeight = 100;
        self.codeWidth = 400;
        self.instructionData = null;
        self.delay = 0;
        return;
      }
      self.delay = current.delay;
      self.code = current.code;
      self.codeHeight = current.codeHeight;
      self.codeWidth = current.codeWidth;
      self.instructionData = current.instructionData;
      console.log(self.instructionData);
    });
  },
};
</script>

 

 

 